<template>
  <div class="rightList">
    <dl v-for="item,i in list" :key="i">
      <dt>{{item.name}}</dt>
      <div class="commodity">
        <dd v-for="item1 in item.shop" :key="item1.id" @click="clickHanlder"><img :src="item1.src">{{item1.name}}</dd>
      </div>
    </dl>
  </div>
</template>
<script>

export default {
  props:['id'],
  methods: {
    clickHanlder() {
      this.$router.push({ path: '/ShopList'})
    }
  },
  data() {
    return {
    list:[
        {
          name:"服配",
          shop:[
            {
              id:1,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:2,
              name:"棒球帽",
             src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:3,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:4,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:5,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:6,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
          ]
        },
        {
          name:"珠宝",
          shop:[
            {
              id:1,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:2,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:3,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:4,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:5,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
            {
              id:6,
              name:"棒球帽",
              src:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2604001170,3586516868&fm=26&gp=0.jpg"
            },
          ]
        }
      ]
    }
  },
  watch: {
    id(value) {
      this.id = value;
    }
  }
}
</script>
<style lang="stylus" scoped>
.rightList
  height 100%
  overflow scroll
dl
  padding-left .2rem
  dt
    font-size .14rem
    line-height .5rem
  .commodity 
    display flex
    flex-wrap wrap
    dd 
      text-align center
      font-size .12rem
      width .7rem
      display flex 
      flex-direction column
      margin-bottom .12rem
      margin-right .1rem
      img 
        width .7rem
        height .7rem
        margin-bottom .12rem
</style>